<template>
    <div>
        <el-row :gutter="20" class="mgb20">
            <el-col :span="6">
                <el-card>
                    <div class="grid-content">
                        <div class="grid-cont-dontent">
                            <div class="grid-num">{{consumerCount}}</div>
                            <div>用户总数</div>
                        </div>
                    </div>
                </el-card>
            </el-col>
            <el-col :span="6">
                <el-card>
                    <div class="grid-content">
                        <div class="grid-cont-dontent">
                            <div class="grid-num">{{songCount}}</div>
                            <div>歌曲总数</div>
                        </div>
                    </div>
                </el-card>
            </el-col>
            <el-col :span="6">
                <el-card>
                    <div class="grid-content">
                        <div class="grid-cont-dontent">
                            <div class="grid-num">{{songListCount}}</div>
                            <div>歌单总数</div>
                        </div>
                    </div>
                </el-card>
            </el-col>
            <el-col :span="6">
                <el-card>
                    <div class="grid-content">
                        <div class="grid-cont-dontent">
                            <div class="grid-num">{{singerCount}}</div>
                            <div>歌手总数</div>
                        </div>
                    </div>
                </el-card>
            </el-col>
        </el-row>
        <el-row :gutter="20" class="mgb20">
            <el-col :span="12">
                <h3 class="mgb20">用户性别比例</h3>
                <div style="background-color:white">
                    <ve-pie :data="consumerSex" :theme="options" ></ve-pie>
                </div>
            </el-col>
            <el-col :span="12">
                <h3 class="mgb20">歌曲类型分布</h3>
                <div style="background-color:white">
                    <ve-histogram :data="songStyle"  ></ve-histogram>
                </div>
            </el-col>
        </el-row>
         <el-row :gutter="20" class="mgb20">
            <el-col :span="12">
                <h3 class="mgb20">歌手类型比例</h3>
                <div style="background-color:white">
                    <ve-pie :data="SingerSex"  ></ve-pie>
                </div>
            </el-col>
            <el-col :span="12">
                <h3 class="mgb20">歌手国籍分布</h3>
                <div style="background-color:white">
                    <ve-histogram :data="country" :theme="options2" ></ve-histogram>
                </div>
            </el-col>
        </el-row>
    </div>
</template>
<script>
import {queryAllConsumer,queryAllSong,queryAllSongList,queryAllSinger} from '../api/index';
export default {
    data() {
        return{
            consumerCount:0,
            songCount:0,
            singerCount:0,
            songListCount:0,
            consumer:[],  //所有用户
            consumerSex:{  //按照性别分类的用户数量
                columns:['性别','总数'],
                rows:[
                    {'性别':'男','总数': 0},
                    {'性别':'女','总数': 0},
                ]
            },
            options:{
                color:['#87cefa','#ffc0cb']
            },
             songStyle:{  //按照性别分类的用户数量
                columns:['风格','总数'],
                rows:[
                    {'风格':'流行','总数': 0},
                    {'风格':'华语','总数': 0},
                    {'风格':'欧美','总数': 0},
                ]
            },
             SingerSex:{  //按照性别分类的用户数量
                columns:['性别','总数'],
                rows:[
                    {'性别':'女','总数': 0},
                    {'性别':'男','总数': 0},
                    {'性别':'组合','总数': 0},
                    {'性别':'不明','总数': 0},
                ]
            },
            country:{  //按照国籍分类的歌手数量
                columns:['国籍','总数'],
                rows:[
                    {'国籍':'中国','总数': 0},
                    {'国籍':'韩国','总数': 0},
                    {'国籍':'日本','总数': 0},
                    {'国籍':'美国','总数': 0},
                    {'国籍':'新加坡','总数': 0},
                ]
            },
            options2:{
                color:['#ffc0cb']
            },
        }
    },
    // 页面加载前执行的
    created(){

    },
    // 页面加载后执行的
    mounted(){
         this.getConsumer();
         this.getSong();
         this.getSongList();
         this.getSinger();
    },
    methods:{
        getConsumer(){
            queryAllConsumer().then(res =>{
                this.consumer = res;
                this.consumerCount = res.length;
                this.consumerSex.rows[0]['总数']= this.setSex(1, this.consumer);
                this.consumerSex.rows[1]['总数']= this.setSex(0, this.consumer);
            })
        },
        setSex(sex,val){    //根据性别获取用户数
            let count = 0;
            for(let item of val){
                if(sex==item.sex){
                    count++;
                }
            }
            return count;
        },
        getSong(){
            queryAllSong().then(res =>{
                this.songCount=res.length;
            })
        },
        getSongList(){
            queryAllSongList().then(res =>{
                this.songListCount=res.length;
                for(let item of res){
                    this.getByStyle(item.style);
                }
            })
        },
        getByStyle(style){   //根据风格获取歌单数量
        for(let item of this.songStyle.rows){
                if(style.includes(item['风格'])){
                    item['总数']++;
                }
            }
        },
        getSinger(){
            queryAllSinger().then(res =>{
                this.singerCount=res.length;
                 this.SingerSex.rows[0]['总数']= this.setSex(0, res);
                 this.SingerSex.rows[1]['总数']= this.setSex(1, res);
                 this.SingerSex.rows[2]['总数']= this.setSex(2, res);
                 this.SingerSex.rows[3]['总数']= this.setSex(3, res);
                 for(let item of res){
                    this.getByCountry(item.location);
                }
            })
        },
        getByCountry(location){   //按照国籍分类的歌手数量
        for(let item of this.country.rows){
                if(location.includes(item['国籍'])){
                    item['总数']++;
                }
            }
        },
        
    }
}
</script>

<style scoped>
.grid-content{
    display:flex;
    align-items: center;
    height: 50px;
}
.grid-cont-dontent{
    flex: 1;
    text-align: center;
    font-size: 15px;
    color: darkgray;
}
.grid-num{
    font-size: 30px;
    font-weight: bold;
}
</style>